<template>
	<view>
		<view class="container">
			<image src="../../static/image/page/zc-bg-img.png" class="zc-bg-img" mode="widthFix"></image>
			<view class="content">
				<view class="content-box">
					<view class="title">立即开始赚钱</view>
				</view>
				<view class="list flex-align">
					<image src="../../static/image/page/jb-img.png" class="jb-img"></image>
					<view>
						<view class="list-title">1.邀请新用户奖200元</view>
						<view class="list-target">达成推广目标即可</view>
					</view>
				</view>
				<view class="list flex-align">
					<image src="../../static/image/page/jb-img.png" class="jb-img"></image>
					<view>
						<view class="list-title">2.轻松做业务赚佣金</view>
						<view class="list-target">最高可奖6000元/单</view>
					</view>
				</view>
				<view class="list flex-align">
					<image src="../../static/image/page/jb-img.png" class="jb-img"></image>
					<view>
						<view class="list-title">3.兼职房赚提成</view>
						<view class="list-target">新房、法拍房、避暑房自有通道</view>
					</view>
				</view>
				<!-- 分割线 -->
				<view class="flex-space">
					<view class="yuan yuan-left"></view>
					<view class="line"></view>
					<view class="yuan yuan-right"></view>
				</view>
				<view class="waper-input flex-align">
					<image src="../../static/image/page/phone-icon.png" class="phone-icon"></image>
					<input class="waper-item-input" type="number" v-model="phoneNum" placeholder="请输入手机号" />
				</view>
				<view class="inviter-box flex-align" v-if="formData.inviteId && formData.inviteId!='null'">
					<image :src=" detail.icon" class="head-img"></image>
					<text class="inviter-text">您正在接受来自{{detail.empName}}的邀请</text>
				</view>
				<!-- 用户协议 -->
				<view class="flex-align yyxy-box">
					<image @click="choose" src="../../static/image/page/zc-xz-icon.png" class="select" v-if="isAgree">
					</image>
					<image @click="choose" src="../../static/image/page/zc-wxz-icon.png" v-else class="select"></image>
					<view class="xy-text flex-align"> 我同意 <navigator url="/pages/privacy-statement/index">
							《贷投狗用户服务协议及隐私声明》</navigator>
					</view>
				</view>
				<button @click="zc" class="btn">立即注册</button>
			</view>
		</view>
		<!-- 填写信息弹层 -->
		<van-popup :show="isShowLayer" round position="bottom">
			<view class="layer-box ">
				<form @submit.stop="formSubmit">
					<view class="layer-title flex">
						<image src="../../static/image/page/xx-icon.png" @click="close" class="xx-icon"></image>
						<view class="title-text">注册信息</view>
					</view>
					<!-- 输入框 -->
					<view class="layer-input-box flex-align">
						<image src="../../static/image/page/user-icon-zc.png" class="phone-icon"></image>
						<input name="name" type="text" class="layer-input" placeholder="请输入您的姓名" />
					</view>
					<view class="layer-input-box flex-align">
						<image src="../../static/image/page/phone-icon.png" class="phone-icon"></image>
						<input name="phoneNumber" type="text" class="layer-input" :value="phoneNum" :disabled="true" />
					</view>
					<view class="flex-space">
						<view class="layer-input-box flex-align layer-input-box-code">
							<image src="../../static/image/page/zc-code-icon.png" class="phone-icon"></image>
							<input name="code" type="text" class="layer-input" placeholder="请输入验证码" />
						</view>
						<!-- 获取验证码 -->
						<view class="get-code" :class="{'ban':isClick}" @click="getCode">获取验证码
							{{isClick?'('+countdown+')':''}}
						</view>
					</view>
					<button formType="submit" class="layer-btn">提交</button>
				</form>
			</view>

		</van-popup>

	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isAgree: false, //是否同意用户协议
				countdown: 60,
				isClick: false, //是否点击获取验证码
				detail: {},
				formData: {
					"code": "",
					"inviteId": '',
					"name": "",    
					"phoneNumber": "",
					latitude: '',
					longitude: ''
				}, 
				phoneNum: '',
				isShowLayer: false, //是否显示填写信息弹层
			}
		},

		onLoad(options) { 
			this.formData.inviteId = options.scene;
			if (this.formData.inviteId && this.formData.inviteId!='null') {
				this.getUserInfo();
			}
			wx.getLocation({
				type: 'wgs84',
				success: (res) => {
					const latitude = res.latitude
					const longitude = res.longitude
					this.formData.latitude = latitude;
					this.formData.longitude = longitude;
				}
			})
		},
		methods: {
			//关闭弹层
			close() {
				this.isShowLayer = false;
			},

			//点击注册按钮
			zc() {
				console.log(this.phoneNum)
				if (this.phoneNum && this.phoneNum.length == 11) {
					if (this.isAgree) {
						//显示弹层
						this.isShowLayer = true;
					} else {
						uni.showToast({
							icon: 'none',
							title: '请同意用户协议',
						})
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: '请输入完整手机号',
					})
				}
			},


			//注册
			formSubmit(e) {
				let data = e.detail.value;
				if (data.name && data.code && data.phoneNumber) {
					data.inviteId =this.formData.inviteId!='null'?this.formData.inviteId:'';
					data.latitude = this.formData.latitude;
					data.longitude = this.formData.longitude;
					this.formData = data;
					this.$api.registerAgent(this.formData).then(res => {
						uni.showModal({
							title: '提示',
							content: '注册成功,请去登录',
							showCancel: false,
							success: (res) => {
								if (res.confirm) {
									uni.redirectTo({
										url: '/pages/login/index'
									})
								}
							}
						})
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '请填写完整信息',
					})
				}

			},
			//获取信息
			getUserInfo() {
				this.$api.getRegisterEmpAppInfo(this.formData.inviteId).then(res => {
					this.detail = res.data.data
				})
			},
			//倒计时
			countdownFun() {
				let timer = setInterval(() => {
					if (this.countdown <= 0) {
						clearInterval(timer);
						this.countdown = 60;
						this.isClick = false;
					} else {
						this.countdown=--this.countdown
					}

				}, 1000)
			},
			// //获取手机号
			// bindinput(e) {
			// 	let data = e.detail.value;
			// 	this.phoneNum = data
			// },
			//获取验证码
			getCode() {

				if (!this.isClick) {
					this.isClick = true;
					this.$api.GetAutoRegisterCode(this.phoneNum)
					this.countdownFun();
				}
			},
			//选择隐私协议
			choose() {
				this.isAgree = !this.isAgree
			},



		},

	}
</script>

<style lang="scss" scoped>
	/* 新版本 */
	.zc-bg-img {
		width: 100vw;
		height: 100%;
		display: block;
	}

	.container {
		position: relative;
	}

	.content {
		position: absolute;
		top: 470rpx;
		left: 30rpx;
		right: 30rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		padding: 30rpx 50rpx 50rpx;
	}

	.content-box {
		position: relative;

	}

	.title {
		font-size: 34rpx;
		font-weight: bold;
		color: #FF7152;
		padding-bottom: 28rpx;
		border-bottom: 1px solid #CED0D5;
		margin-bottom: 20rpx;
	}

	.list {
		margin-bottom: 20rpx;
	}

	.jb-img {
		width: 103rpx;
		height: 103rpx;
		margin-right: 40rpx;
	}

	.list-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #FF7152;
		margin-bottom: 22rpx;
	}

	.list-target {
		font-size: 28rpx;
		color: #333333;
	}

	.line {
		flex: 1;
		border-bottom: 1rpx dashed #E6E7E9;
	}

	.yuan {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		background-color: #F76143;
		margin: 15rpx 30rpx;
	}

	.yuan-left {
		margin-left: -72rpx;
	}

	.yuan-right {
		margin-right: -72rpx;
	}

	.waper-input {
		width: 100%;
		height: 80rpx;
		background: rgba(255, 250, 249, 1);
		border-radius: 20rpx;
		padding: 0 30rpx;
		margin-bottom: 38rpx;
		flex: 1;
	}


	.phone-icon {
		width: 34rpx;
		height: 34rpx;
		margin-right: 20rpx;
	}

	.inviter-box {
		width: 100%;
		border-radius: 20rpx;
		background-color: rgba(255, 250, 249, 1);
		padding: 45rpx 26rpx;
		margin-bottom: 20rpx;
	}

	.head-img {
		width: 60rpx;
		height: 60rpx;
		margin-right: 20rpx;
		border-radius: 50%;
	}

	.inviter-text {
		font-size: 28rpx;
		color: #333333;
	}

	.select {
		width: 28rpx;
		height: 28rpx;
		margin-right: 10rpx;
	}

	.xy-text {
		font-size: 22rpx;
		color: #999999;
	}

	.yyxy-box {
		margin-bottom: 30rpx;
	}

	.btn {
		width: 100%;
		height: 98rpx;
		background: linear-gradient(0deg, #FF9C00 100%, #F5AC26 0%);
		box-shadow: 0px 11rpx 13rpx 0px rgba(255, 114, 0, 0.23);
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 98rpx;
	}

	/* 弹层信息 */
	.layer-box {
		padding: 60rpx 30rpx 50rpx;
	}

	.layer-title {
		margin-bottom: 67rpx;
	}

	.xx-icon {
		width: 27rpx;
		height: 27rpx;
		position: relative;
		z-index: 9;
	}

	.title-text {
		flex: 1;
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		margin-left: -27rpx;
	}

	.layer-input-box {
		width: 100%;
		height: 98rpx;
		background: #F8F8F8;
		border-radius: 49rpx;
		padding: 0 35rpx;
		margin-bottom: 30rpx;
	}

	.layer-input {
		font-size: 32rpx;
	}

	.layer-input-box-code {
		flex: 1;
	}

	.get-code {
		padding: 0 15rpx;
		min-width: 166rpx;
		height: 98rpx;
		background: rgba(246, 171, 36, .18);
		border-radius: 49px;
		font-size: 28rpx;
		color: #FF9C01;
		text-align: center;
		line-height: 98rpx;
		margin-left: 38rpx;
		margin-bottom: 38rpx;
		padding: 0 30rpx;
	}

	/* 禁止 */
	.ban {
		color: #fff;
		background-color: rgba(220, 220, 220, 1);
	}

	.layer-btn {
		height: 98rpx;
		background: linear-gradient(180deg, #F5AC26, #FF9C00);
		box-shadow: 0px 11rpx 13rpx 0px rgba(255, 114, 0, 0.23);
		border-radius: 49rpx;
		font-size: 36rpx;
		/* font-weight: bold; */
		color: #FFFFFF;
		line-height: 98rpx;
	}
</style>
